<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <div class="question-grid">
            <el-button 
              v-for="(item, index) in quList" 
              :key="index"
              :disabled="answeredQuestions.includes(index)"
              :type="answeredQuestions.includes(index) ? 'info' : 'primary'"
              @click="selectQuestion(item, index)"
            >
              题目 {{ index + 1 }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 答题弹框 -->
    <el-dialog
      :title="`题目${currentQuestionIndex + 1}`"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="timer">剩余时间: {{ minutes }}:{{ seconds }}</div>
      
      <div class="question-content">
        <h3>{{ currentQuestion.content }}</h3>
        <p v-if="currentQuestion.image"><img :src="currentQuestion.image"></p>
        <p v-if="currentQuestion.video"><video controls :src="currentQuestion.video"></video></p>
      </div>

      <div class="options">
        <p>选项：</p>
        <el-checkbox-group v-model="checkList">
          <el-checkbox 
            v-for="(option, index) in currentQuestion.answerList" 
            :key="index" 
            :label="option.id"
          >
            {{ option.content }}
            <div v-if="option.image" style="clear: both">
              <img :src="option.image">
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAnswer">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { fetchQucikRequired } from '@/api/paper/exam';

export default {
  name: 'RequiredQu',

  created(){
    this.fetchData({quType:2})
  },

  data() {
    return {
      quList: [], // 题目列表
      answeredQuestions: [], // 已答题目索引
      currentQuestionIndex: null,
      currentQuestion: {},
      dialogVisible: false,
      checkList: [], // 多选答案
      timer: null,
      timeLeft: 180, // 3分钟 = 180秒
      minutes: '03',
      seconds: '00'
    }
  },

  methods: {
    selectQuestion(question, index) {
      this.currentQuestion = question
      this.currentQuestionIndex = index
      this.dialogVisible = true
      this.timeLeft = 180
      this.checkList = []
      this.startTimer()
    },

    fetchData(data){
      fetchQucikRequired(data).then(res => {
        console.log(res);
        if(res.success) {
          this.quList = res.data.quList
        }
      })
    },

    startTimer() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      
      this.timer = setInterval(() => {
        this.timeLeft--
        this.minutes = Math.floor(this.timeLeft / 60).toString().padStart(2, '0')
        this.seconds = (this.timeLeft % 60).toString().padStart(2, '0')
        
        if(this.timeLeft <= 0) {
          this.$message.warning('答题时间已到!')
          this.handleClose()
        }
      }, 1000)
    },

    handleClose() {
      if(this.timer) {
        clearInterval(this.timer)
      }
      this.dialogVisible = false
      this.checkList = []
    },

    submitAnswer() {
      if(this.checkList.length === 0) {
        this.$message.warning('请选择答案')
        return
      }
      
      this.answeredQuestions.push(this.currentQuestionIndex)
      
      // 判断答案是否正确
      const correctAnswers = this.currentQuestion.answerList.filter(item => item.isRight).map(item => item.id)
      const isCorrect = this.checkList.length === correctAnswers.length && 
        this.checkList.every(answer => correctAnswers.includes(answer))
      
      if(isCorrect) {
        this.$message.success('回答正确!')
      } else {
        this.$message.error('回答错误!')
      }
      
      this.handleClose()
    }
  },

  beforeDestroy() {
    if(this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  padding: 20px;
}

.timer {
  text-align: center;
  font-size: 24px;
  color: #f56c6c;
  margin-bottom: 20px;
}

.question-content {
  margin-bottom: 20px;
}

.question-content h3 {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.5;
}

.options {
  margin-top: 20px;
}

.el-checkbox {
  display: block;
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.el-checkbox.is-checked {
  border-color: #409eff;
}

.el-checkbox img {
  max-width: 200px;
  max-height: 200px;
  border: 1px dotted #dcdfe6;
}

.el-button[disabled] {
  cursor: not-allowed;
}

video {
  max-width: 100%;
  height: 400px;
}
</style>